<template>
    <div class="companies">
        <pub-head isBorder="true"></pub-head>
        <!-- 头部 -->
        <div class="head ali-c flex">
            <router-link :to="'/'">首页 ></router-link>
            <router-link :to="'/search'">&nbsp;信息查询 ></router-link>
            <span class="blue-c">&nbsp;企业资质查询</span>
        </div>

        <!-- 查询列表 -->
        <div class="companies-box flexv" v-if="!result">
            <div class="companies-box-head flex ali-b">请输入查询条件<span>（输入任意一项即可）</span></div>
            <ul class="companies-box-lists flexv">
                <li class="flex companies-box-list">
                    <span class="companies-box-name">企业名称</span>
                    <input type="text" v-model="cname" class="flex1 tr">
                    <img class="search-list-img" v-show="!cname" src="~@/assets/in-ico.png" alt="">
                </li>
                <li class="flex companies-box-list">
                    <span class="companies-box-name">企业法人</span>
                    <input type="text" v-model="name" class="flex1 tr">
                    <img class="search-list-img" v-show="!name" src="~@/assets/in-ico.png" alt="">
                </li>
                <li class="flex companies-box-list">
                    <span class="companies-box-name">证书编号</span>
                    <input type="text" v-model="number" class="flex1 tr">
                    <img class="search-list-img" v-show="!number" src="~@/assets/in-ico.png" alt="">
                </li>
                <li class="flex companies-box-list">
                    <span class="companies-box-name">营业执照</span>
                    <input type="text" v-model="license" class="flex1 tr">
                    <img class="search-list-img" v-show="!license" src="~@/assets/in-ico.png" alt="">
                </li>
            </ul>
            <div v-show="txt == false" class="sub-btn danger">请至少填写一项</div>
            <div class="sub-btn" v-show="txt == true" @click="subForm">立即查询</div>
        </div>

        <!-- 查询结果 -->
        <div class="search-result" v-if="result">
            <!-- 重新查询 -->
            <div class="research flexc"><p @click="research">重新查询</p></div>

            <!-- 查询结果列表 -->
            <div class="search-result-box flexv">
                <div class="search-result-head flex ali-c">
                    <span class="name">查询结果</span>
                </div>
                <div class="search-result-lists flexv" :class="{'flexc' : isNone == true}">
                    <ul class="flex1 flexv" v-for="(info, index) in results" :key="index" v-show="!isNone">
                        <li class="ali-c">
                            <span class="name">序号</span>
                            <p class="txt flex1">{{index + 1}}</p>
                        </li>
                        <li class="ali-c">
                            <span class="name">企业名称</span>
                            <p class="txt flex1">{{info.company_name}}</p>
                        </li>
                        <li class="ali-c">
                            <span class="name">资质证书编号</span>
                            <router-link to="" class="txt flex1 blue-c">{{info.certificate_num}}</router-link>
                            <!-- <router-link :to="'/companiesDetail/' + info.certificate_num" class="txt flex1 blue-c">{{info.certificate_num}}</router-link> -->
                        </li>
                        <li class="ali-c">
                            <span class="name">发证时间</span>
                            <p class="txt flex1">{{info.issue_time}}</p>
                        </li>
                        <li class="ali-c">
                            <span class="name">证书有效期</span>
                            <p class="txt flex1">{{info.certificate_vaild_date}}</p>
                        </li>
                        <li class="ali-c">
                            <span class="name">发证机关</span>
                            <p class="txt flex1">{{info.issue_office}}</p>
                        </li>
                    </ul>

                    <!-- 空 -->
                    <div class="empty-lists" v-if="isNone">没有数据哦~</div>
                </div>
            </div>
        </div>

        
        <!-- 占位符 -->
        <div class="pub-foot-seat"></div>
        <pub-foot search="true"></pub-foot>
    </div>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import pubHead from '@/components/head'
import pubFoot from '@/components/foot'
import { Toast, Area, Popup, Picker } from 'vant';
import { pca } from 'area-data'; // v5 or higher
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import { AreaSelect } from 'vue-area-linkage';

Vue.use(Area).use(Popup).use(Picker).use(AreaSelect);
export default {
    data(){
        return{
            txt: false, //是否输入信息？
            isNone: false, // 是否为空
            result: false, //是否显示查询结果？
            results: [], //查询结果
            name: null, //企业法人
            cname: null, //企业名称
            license: null, //营业执照
            number: null, //证编号
            page: 1, //页码
            lists: [], //信息列表
            url: null,
        }
    },
    computed: {
        ...mapState(['user'])
    },
    components: {
        pubHead,
        pubFoot,
        'van-popup': Popup
    },
    watch: {
        name(newVal, oldVal){
            if(this.name){
                this.txt = true;
                this.name = this.name
            }else{
                this.txt = false
            }
        },
        cname(newVal, oldVal){
            if(this.cname){
                this.txt = true;
                this.cname = this.cname;
            }else{
                this.txt = false
            }
        },
        number(newVal, oldVal){
            if(this.number){
                this.txt = true;
                if (!(/^[A-Za-z0-9]+$/).test(this.number)) {
                    this.number = null
                }else{
                    this.number = this.number;
                }
            }else{
                this.txt = false
            }
        },
        license(newVal, oldVal){
            if(this.license){
                this.txt = true;
                if (!(/^[A-Za-z0-9]+$/).test(this.license)) {
                    this.license = null
                }else{
                    this.license = this.license
                }
            }else{
                this.txt = false
            }
        },
        txt(newVal, oldVal){
            if (!this.name&&!this.cname&&!this.number&&!this.license) {
                this.txt = false
            }else{
                this.txt = true;
            }
        }
    },
    methods:{
        subForm(){
            Toast.loading('请稍后...')
            this.url = 'https://api.shenjian.io/?appid=1f02844412de0399b9df3c57bc568724';
            if(this.name){
                this.url = this.url + '&legalRepresentative=' + this.name
            }
            if(this.cname){
                this.url = this.url + '&enterpriseName=' + this.cname
            }
            if(this.number){
                this.url = this.url + '&certificateNum=' + this.number
            }
            if(this.license){
                this.url = this.url + '&registrationNum=' + this.license
            }
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Test&a=index', {
                params: {parameter: this.url + '&pageIndex=' + this.page++}
            }).then(res => {
                if (res.data.error_code == 0) {
                    this.results = res.data.data.data;
                    this.result = true;
                    if(res.data.data.data.length < 1){
                        this.isNone = true
                    }
                    Toast.clear();
                }else{
                    Toast.clear();
                    Toast({
                        duration: 1800,
                        message: res.data.reason
                    })
                }
            })
        },
        // 重新查询
        research(){
            this.result = false;
        },
        // 查看更多
        more(){
            this.subForm()
        }
    }
}
</script>
<style lang="less">
.companies{
    min-height: 100vh;
    background-color: #f5f5f5;
    /* 头部 */
    .head {
        height: 0.8rem;
        position: fixed;
        left: 0;
        right: 0;
        background-color: #f5f5f5;
        padding: 0 0.24rem;
        font-size: 0.28rem;
        line-height: 120%;
        a,span{
            color: #999;
            font-weight: bold;
        }
    }
    // 查询列表
    .companies-box{
        margin-top: 0.8rem;
        padding: 0.4rem;
        background-color: #fff;
        .companies-box-head{
            font-size: 0.32rem;
            color: #333;
            font-weight: bold;
            span{
                font-size: 0.26rem;
                font-weight: normal;
                color: #999;
            }
        }
        .companies-box-lists{
            margin-top: 0.24rem;
            .companies-box-list{
                width: 100%;
                height: 0.9rem;
                border-bottom: 1px dashed #d9d9d9;
                font-size: 0.26rem;
                line-height: 0.9rem;
                color: #333;
                span{
                    font-weight: bold;
                }
                input{
                    padding: 0 0 0 0.2rem;
                }
                .search-list-img {
                    width: 0.32rem;
                    height: 0.32rem;
                    margin: auto 0;
                }
                .job{
                    padding-right: 0.26rem;
                    background: url('~@/assets/to.png') no-repeat right center;
                    background-size: 0.12rem 0.24rem;
                }
            }
        }
        .sub-btn{
            width: 100%;
            height: 0.8rem;
            margin-top: 0.72rem;
            margin-bottom: 1.86rem;
            border-radius: 0.1rem;
            font-size: 0.26rem;
            line-height: 0.8rem;
            text-align: center;
            color: #fff;
            background-color: #1f78ff;
            cursor: pointer;
        }
        .danger{
            background-color: #fd4c4d;
        }
    }
    // 查询结果
    .search-result {
        // 按钮
        .research {
            width: 100%;
            height: 1.4rem;
            position: fixed;
            top: 1.72rem;
            left: 0;
            right: 0;
            padding: 0 0.24rem;
            font-size: 0.26rem;
            text-align: center;
            color: #fff;
            background-color: #fff;
            p {
                width: 100%;
                height: 0.8rem;
                border-radius: 0.1rem;
                line-height: 0.8rem;
                background-color: #1f78ff;
                cursor: pointer;
                
            }
        }
        // 结果列表
        .search-result-box {
            margin-top: 2.4rem;
            .search-result-head {
                height: 0.78rem;
                padding: 0 0.24rem;
                border-bottom: 1px solid #d9d9d9;
                background-color: #fff;
                .name{
                    height: 0.36rem;
                    padding-left: 0.1rem;
                    border-left: 2px solid #1f78ff;
                    font-size: 0.3rem;
                    font-weight: bold;
                    line-height: 0.36rem;
                    color: #1f78ff;
                }
                .note {
                    margin-left: 0.1rem;
                    font-size: 0.26rem;
                    line-height: 120%;
                    font-weight: bold;
                    color: #fd4c4d;
                }
            }
            // 结果内容
            .search-result-lists {
                ul {
                    margin-bottom: 0.2rem;
                    padding: 0 0.4rem;
                    background-color: #fff;
                    li {
                        width: 100%;
                        height: 0.9rem;
                        border-bottom: 1px dashed #d9d9d9;
                        font-size: 0.26rem;
                        color: #333;
                        background-color: #fff;
                        .name {
                            width: 1.85rem;
                            height: 0.5rem;
                            border-radius: 0.1rem;
                            line-height: 0.5rem;
                            text-align: center;
                            font-weight: bold;
                            color: #1f78ff;
                            background-color: #dcecff;
                        }
                        .txt {
                            padding-left: 0.2rem;
                            line-height: 120%;
                            font-weight: bold;
                        }
                        .blue-c{
                            text-decoration: underline
                        }
                    }
                    li:last-child{
                        border-bottom: none;
                        margin-bottom: 0.4rem;
                    }
                }
                .more {
                    width: 1.8rem;
                    height: 0.6rem;
                    margin: 0.2rem auto;
                    font-size: 0.24rem;
                    text-align: center;
                    line-height: 0.6rem;
                    color: #fff;
                    border-radius: 0.1rem;
                    background-color: #999;
                }
                .empty-lists {
                    width: 100%;
                    height: 5.90rem;
                    padding-top: 0.6rem;
                    text-align: center;
                    background-color: #fff;
                }
            }
        }
    }
}
</style>

